<template>
  <div>
    <div>
      <el-button size="mini">上一页</el-button>
      <el-button size="mini">下一页</el-button>
    </div>
    <canvas v-for="item in totalPage" :key="item" :id="'the-canvas' + item" class="pdf-content"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist/build/pdf'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
// import api from '@/settings'

export default {
  name: 'ViewerAsync',
  props: {
    pdfUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      totalPage:[]
    }
  },
  created() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
    let winW = document.documentElement.clientWidth

    let pdfUrl = ''

    let loadingTask = pdfjsLib.getDocument(pdfUrl)
    loadingTask.promise.then(
      pdf => {
        console.log("PDF:"+JSON.stringify(pdf))
        let pageNum = pdf.numPages
        this.totalPage = pageNum
        for (let i = 1; i <= pageNum; i++) {
          pdf.getPage(i).then(page => {
            let viewport = page.getViewport({scale: 1})
            let scale = (winW / viewport.width).toFixed(2)
            let scaledViewport = page.getViewport({scale: 1})
            let canvas = document.getElementById('the-canvas' + i)
            let context = canvas.getContext('2d')
            canvas.height = scaledViewport.height
            canvas.width = scaledViewport.width
            let renderContext = {
              canvasContext: context,
              viewport: scaledViewport
            }
            let renderTask = page.render(renderContext)
            renderTask.promise.then(() => {})
          })
        }
      },
      function (reason) {
        console.error(reason)
      }
    )
  },

  methods: {},
  mounted() {}
}
</script>
